import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import { fetchCompletion } from './api/api'
import userjpg from './assets/user.jpg'; // 导入本地图片
import { Button, Input  } from 'antd';
const { TextArea } = Input;



function App() {
  const chatHistoryRef = useRef(null); // 创建 ref
  const [prompt, setPrompt] = useState('');
  // const [promptSend, setPromptSend] = useState('');
  // const [response, setResponse] = useState('');
  const [chatHistory, setChatHistory] = useState([]); // 聊天记录
  const [isLoading, setIsLoading] = useState(false);
// const str= 'fgesdfereffg' 
// const result={}
// for (const c of str) {
//   result[c] = result[c] ? result[c] + 1 : 1;
// }
// console.log(' result[c]', result)

  const handleGenerate = async () => {
    if (!prompt.trim()) return; // 如果输入为空，直接返回
    setIsLoading(true);
    // setResponse(''); // 清空显示内容
    // setPromptSend(prompt)  //用户信息回显

    // 将用户消息添加到聊天记录
    setChatHistory(prev => [
      ...prev,
      { role: 'user', content: prompt },
    ]);
    try {
      const result = await fetchCompletion(prompt)
      // 将 AI 回复添加到聊天记录
      setChatHistory(prev => [
        ...prev,
        { role: 'assistant', content: result },
      ]);
      setPrompt('')
      
      // setResponse(result);
    } catch (error) {
      console.log(prompt, 'prompt111')
      console.error('Error generating response:', error);
    } finally{
      setIsLoading(false)
    }
  };
  // 监听键盘事件
  const handleKeyDown = (e) => {
    console.log(e, 'keydown')
    if (e.keyCode === 13) {
      handleGenerate();
    }
  };
  // 监听聊天记录变化，滚动到底部
// 每次 chatHistory 更新时，将聊天框的 scrollTop 设置为 scrollHeight，从而实现滚动到底部。
// scrollHeight scrollHeight 是元素内容的总高度，包括可见区域和不可见区域（即被滚动条隐藏的部分）如果一个聊天框的内容高度是 1000px，但聊天框的可见区域高度只有 300px，那么 scrollHeight 就是 1000px。通过 scrollHeight，可以知道元素内容的完整高度，即使内容超出了可见区域。
//scrollTop 是元素内容垂直滚动的距离（以像素为单位）果聊天框的内容已经向下滚动了 200px，那么 scrollTop 的值就是 200。如果 scrollTop 设置为 0，表示内容没有滚动，顶部对齐。通过设置 scrollTop，可以控制元素的滚动位置。
  useEffect(() => {
    // console.log('chatHistoryRef:', chatHistoryRef)
    console.log('chatHistory:', chatHistory)

    if (chatHistoryRef.current) {
      // 滚动到底部 通过设置 scrollTop，可以控制元素的滚动位置。
      // scrollTop = scrollHeight 的作用 ，元素的滚动条会滚动到底部
      // scrollTop 是聊天框当前滚动的位置，设置为 scrollHeight 即可滚动到底部。
      chatHistoryRef.current.scrollTop = chatHistoryRef.current.scrollHeight ;
    }
  }, [chatHistory]); // 监听 chatHistory 的变化. // 每次发送消息后，如果聊天框内容超出高度，滚动条会自动滚动到底部，确保最新消息可见。

  return (
    <div className="App">
      <h1 className='h1-title'>OLLAMA API Chat</h1>
      {/* 聊天记录 */}
      <div className="chat-history" ref={chatHistoryRef}>
        {chatHistory.map((message, index) => (
          <pre
            key={index}
           className='message'
          >
            {/*  className={`message ${message.role === 'user' ? 'user-response' : 'response'}`} */}
            {/* 用户的 */}
            {message.role === 'user'&& message.content&&(<div className='userItem'>
              <span className='user-text'>{message.content}</span>
              <div className='img-container'>
              <img
                src={userjpg}
                alt="Ollama Logo"
                width="50" // 设置图片宽度
                height="auto" // 高度自适应
                className='userlogo'
              />
              </div>
            </div>)}
            {/* 机器人的 */}
            {message.role === 'assistant'&& message.content && (
              <div>
              <strong>AI: </strong>
              <p className='response'>{message.content}</p>
            </div>)}
          </pre>
        ))}
      </div>
      <div className='footer-box'>
      {/* {isLoading && (
        <div className="loading">加载中......</div>
      )} */}
        {/* <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          onKeyDown={handleKeyDown} // 添加键盘事件监听
          placeholder="请输入..."
          disabled={isLoading} // 加载时禁用输入框
        /> */}
        <TextArea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        onKeyDown={handleKeyDown} // 添加键盘事件监听
         placeholder="请输入..."
        autoSize={{ minRows: 2, maxRows: 8 }}
        disabled={isLoading} // 加载时禁用输入框
      />
        <Button  type='primary' size='large' loading={isLoading } onClick={handleGenerate}>{ isLoading ? '发送中':'发送'}</Button>
      </div>
      
    </div>
  );
}

export default App;